<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <!--<head metal:use-macro="macro/design.xhtml/head"/>-->
    <head metal:use-macro="macro/design.xhtml/head"/>
    <body>
        <div id="container">
            <div metal:use-macro="macro/design.xhtml/top" id='header'>
                <a href="http://iaeste.no"><img class="logo" src="xhtml/design/img/logo_iaeste.gif"/></a>
            </div>
            <div id="main">
                <div id="content">
                    <legend>1. Personal</legend>
                    <div id="error">
                        <ul>
                            <li><strong>Invalid firstname:</strong> We want more than 3 letters!</li>
                            <li><strong>Invalid lastname:</strong> We want more than 3 letters!</li>
                            <li><strong>Invalid birthdate:</strong> We want a valid date!!</li>
                            <li><strong>Invalid sex:</strong> You have to choose male/female!</li>
                            <li><strong>Invalid marital status:</strong> You have to choose marital status!</li>
                            
                        </ul>
                    </div>
                    <div id="error" class="valid">
                        <ul>
                            <li><strong>Congratulations!</strong> All personal fields are OK!</li>
                        </ul>
                    </div>
                    <form name="step1" id="customForm" action="" method="post">
                        <div>
                            <label for="firstname">Firstname</label>
                            <input id="firstname" name="firstname" type="text" tal:attributes="value person/firstname" />
                            <span id="firstnameinfo">What's your firstname?</span>
                        </div>
                        <div>
                            <label for="lastname">Lastname</label>
                            <input id="lastname" name="lastname" type="text" tal:attributes="value person/lastname" />
                            <span id="lastnameinfo">What's your lastname?</span>
                        </div>
                        <div>
                            <label for="birthdate">Date of birth</label>
                            Day: <input id="bornday" name="bornday" type="text" tal:attributes="value person/bornDay" />
                            Month: <input id="bornmonth" name="bornmonth" type="text" tal:attributes="value person/bornMonth" />
                            Year: <input id="bornyear" name="bornyear" type="text" tal:attributes="value person/bornYear" />
                            <span id="birthdateinfo">What's your date of birth?</span>
                        </div>
                        <div>
                            <label for="sex">Sex</label>
                            <select id="sex" name="sex">
                                <option value=""></option>
                                <option value="M">Male</option>
                                <option value="F">Female</option>
                            </select>
                            <span id="sexinfo">What's your sex?</span>
                        </div>
                        <div>
                            <label for="maritalstatus">Marital status</label>
                            <select id="maritalstatus" name="maritalstatus">
                                <option value=""></option>
                                <option value="single">Single</option>
                                <option value="unmarried">Unmarried</option>
                                <option value="married">Married</option>
                                <option value="divorced">Divorced</option>
                                <option value="widowed">Widowed</option>
                            </select>
                            <span id="maritalstatusinfo">What's your marital status?</span>
                        </div>
                        <div>
                            <label for="medicallyfit">Medically fit</label>
                            <select id="medicallyfit" name="medicallyfit">
                                <option value=""></option>
                                <option value="Y">Yes</option>
                                <option value="N">No</option>
                            </select>
                            <span id="medicallyfitinfo">Are you medically fit?</span>
                        </div>
                        <div>
                            <label for="medicalstatus">Medical status</label>
                            <textarea id="medicalstatus" name="medicalstatus" tal:content="person/medicalstatus"></textarea>
                            <span id="medicalstatusinfo">If not, explain?</span>
                        </div>
                        <!-- Term Address lines -->
                        <div>
                            <label for="termAddr1">Address line 1</label>
                            <input id="termAddr1" name="termAddr1" type="text" tal:attributes="value person/termAddr1" />
                            <span id="termAddr1info">What's your term address?</span>
                        </div>
                        <div>
                            <label for="termAddr2">Address line 2</label>
                            <input id="termAddr2" name="termAddr2" type="text" tal:attributes="value person/termAddr2" />
                            <span id="termAddr2info">What's your term address?</span>
                        </div>
                        <div>
                            <label for="termPostalCode">Postal code</label>
                            <input id="termPostalCode" name="termPostalCode" type="text" tal:attributes="value person/termPostalCode" />
                            <span id="termPostalCodeinfo">What's your postal code?</span>
                        </div>
                        <div>
                            <label for="mobilephone">Mobile phone</label>
                            <input id="mobilephone" name="mobilephone" type="text" tal:attributes="value person/mobilephone" />
                            <span id="mobilephoneinfo">What's your mobile phone?</span>
                        </div>
                        <!-- Home Address lines -->
                        <div>
                            <label for="homeAddr1">Address line 1</label>
                            <input id="homeAddr1" name="homeAddr1" type="text" tal:attributes="value person/homeAddr1" />
                            <span id="homeAddr1info">What's your home address?</span>
                        </div>
                        <div>
                            <label for="homeAddr2">Address line 2</label>
                            <input id="homeAddr2" name="homeAddr2" type="text" tal:attributes="value person/homeAddr2" />
                            <span id="homeAddr2info">What's your home address?</span>
                        </div>
                        <div>
                            <label for="homePostalCode">Postal code</label>
                            <input id="homePostalCode" name="homePostalCode" type="text" tal:attributes="value person/homePostalCode" />
                            <span id="homePostalCodeinfo">What's your postal code?</span>
                        </div>
                        <div>
                            <label for="homephone">Home phone</label>
                            <input id="homephone" name="homephone" type="text" tal:attributes="value person/privatePhone" />
                            <span id="homephoneinfo">What's your home phone?</span>
                        </div>
                        <!-- Nationality -->
                        <div>
                            <label for="nationality">Nationality</label>
                            <input id="nationality" name="nationality" type="text" tal:attributes="value person/nationality" />
                            <span id="nationalityinfo">What's your nationality?</span>
                        </div>
                        <div>
                            <input id="send" name="next" type="submit" value="Continue >>" />
                        </div>
                    </form>
                </div>
            </div>
            <div metal:use-macro="macro/design.xhtml/bottom" id='footer'/>
        </div>
        <script type="text/javascript" src="./jscript/personalvalidation.js"></script>
    </body>
</html>
